<template>
  <div class="main">
    <div class="video-title f24">{{ data }}</div>
    <video ref="videoPlayer" class="video-js vjs-big-play-centered"></video>
  </div>
</template>

<script setup lang="ts">

import { Back } from "@element-plus/icons-vue";
import videojs from "video.js";
import "video.js/dist/video-js.css";


const props = defineProps(['dataObj'])


const videoPlayer = ref(null);
let player: videojs.Player | null = null;

const initPlayer = (url) => {
  player = videojs(videoPlayer.value, {
    controls: true, // 启用控制条
    autoplay: false, // 禁止自动播放
    preload: "auto", // 自动预加载
    fluid: true, // 使播放器宽度自适应容器
    sources: [
      {
        src: url, // 使用 props 传入的视频地址
        type: "video/mp4",
      },
    ],
    controlBar: {
      // 自定义 controlBar 的子组件
      children: [
        "playToggle", // 播放/暂停按钮
        "volumePanel", // 音量控制
        "currentTimeDisplay", // 当前时间
        "timeDivider", // 时间分隔符
        "durationDisplay", // 总时长
        "progressControl", // 进度条
        "remainingTimeDisplay", // 剩余时间
        "playbackRateMenuButton", // 播放速度
        "fullscreenToggle", // 全屏按钮
      ],
    },
  });
};
// 监听 ref
watch("dataObj", (newVal, oldVal) => {
  console.log(`count变化: ${oldVal} → ${newVal}`);
});
onMounted(() => {
  if (videoPlayer.value) {
    initPlayer(props.dataObj.video);
  }
});

onBeforeUnmount(() => {
  if (player) {
    player.dispose(); // 销毁 player 实例，释放资源
  }
});
</script>
<style lang="scss" scoped>
.main {
  flex: 7;
  background: #191919;
  color: #fff;
  padding: 0 30px 50px;
  height: 100%;
  .video-title {
    margin: 40px 0 20px 160px;
  }
  video {
    width: 100%;
    height: 100%;
  }
}

/* 自定义 video.js 控制条的样式 */
:deep(.video-js) {
  width: 100% !important;
  height: calc(100% - 86px) !important;
  padding-top: 0 !important;
  background-color: #000; /* 播放器背景颜色 */
  .vjs-control-bar {
    background-color: rgba(0, 0, 0, 0.5); /* 控制条背景颜色 */
    // height: 5em;
  }
  .vjs-play-control,
  .vjs-volume-panel {
    color: #f01400; /* 播放按钮颜色 */
  }
  .vjs-progress-control {
    background-color: transparent; /* 进度条背景颜色 */
  }
  .vjs-play-progress,
  .vjs-volume-level {
    background: #f01400;
  }
  .vjs-play-control .vjs-icon-placeholder:before,
  .vjs-mute-control .vjs-icon-placeholder:before,
  .vjs-fullscreen-control .vjs-icon-placeholder:before {
    // line-height: 2.75;
  }
  // .vjs-time-control {
  //   line-height: 5em;
  // }
}
</style>
